<template>
  <div class="user-page">
    <store-nav-bar class="nav-out top-bar" :opacity="1-opacityNum" v-show="1-opacityNum > 0">
      <template slot="right">
        <icon class="icon" name="kefu" @click.native="openService()"></icon>
        <icon class="icon" name="shezhi" @click.native="jumpLink('/setting')"></icon>
      </template>
    </store-nav-bar>
    <store-nav-bar class="nav-in top-bar" background="#fff" :opacity="opacityNum" v-show="opacityNum  > 0">
      <template v-slot:title>
        <span>我的</span>
      </template>
      <template slot="right">
        <icon class="icon" name="kefu" @click.native="openService()"></icon>
        <icon class="icon" name="shezhi" @click.native="jumpLink('/setting')"></icon>
      </template>
    </store-nav-bar>
    <div class="page-content">
      <div class="info-bar">
        <div class="row-1">
          <div class="col-left">
            <div class="name">{{umsMember.nickname || bindPhoneStr}}</div>
            <div class="invite-code" v-if="vipEnable">
              <span>邀请码{{amsAccount.agentNo}}</span>
              <span class="line"></span>
              <span class="copyAgentNo" :data-clipboard-text="amsAccount.agentNo"  @click="copyAgentNo">复制</span>
            </div>
          </div>
          <div class="col-right" @click="jumpLink('/userInfo')">
            <img :src="umsMember.icon || default_head">
          </div>
        </div>
        <div class="row-2">
          <div class="item" @click="jumpLink('/vip')" v-if="vipEnable">
            <span class="val">{{amsAccount.balance || 0}}</span>
            <span class="label">收入</span>
          </div>
          <div class="item" @click="jumpLink('/rewardPoints')">
            <span class="val">{{integration.availableScore || 0}}</span>
            <span class="label">积分</span>
          </div>
          <!-- <div class="item">
            <span class="val">0</span>
            <span class="label">优惠券</span>
          </div> -->
        </div>
      </div>
      <div class="nav-bar" @click="bannerClick">
        <img src="./imgs/nav.png">
        <div v-if="vipEnable" class="words">
          <p class="row-1">邀请好友</p>
          <p class="row-2 mgt">好友下单也可获得收益哦</p>
        </div>
        <div v-else class="words">
          <p class="row-1">购买商品会员</p>
          <p class="row-2">购买任意<span>1</span>件商品即可成为会员</p>
        </div>
      </div>
      <div class="order-bar">
        <div class="top-title" @click="toOrderCenter">
          <span>我的订单</span>
          <icon class="icon" name="right-arraw"></icon>
        </div>
        <ul>
          <li v-for="(item,index) in orderTabs" :key="index" @click="jumpLink(item.link,item.prams)">
            <icon class="icon" :name="item.icon"></icon>
            <span class="name">{{item.name}}</span>
            <span class="num" v-if="orderView.length && orderView[index]">{{orderView[index]}}</span>
          </li>
        </ul>
      </div>
      <div class="service-bar">
        <div class="top-title">
          <span>我的服务</span>
          <icon class="icon" name="right-arraw"></icon>
        </div>
        <ul>
          <li v-for="(item,index) in serviceTabs" :key="index" @click="serviceTabClick(item)">
            <img :src="item.icon">
            <span>{{item.name}}</span>
          </li>
        </ul>
      </div>
    </div>
    <store-share
      v-if="shareEnable"
      v-model="share.msg"
      :show="share.show"
      @cancel="share.show=false"
    ></store-share>
    <store-service :value.sync="showService"></store-service>
  </div>
</template>

<script>
import Vue from "vue";
import { mapState, mapGetters, mapActions } from "vuex";
import storeNavBar from "@/components/store-nav-bar";
import storeShare from '@/components/store-share'
import storeService from '@/components/store-service'
import service from '@/utils/service'
import { Grid, GridItem, Icon, Toast, NavBar } from "vant";
import Clipboard from "clipboard";
Vue.use(Grid).use(GridItem);


export default {
  components: {
    [Icon.name]: Icon,
    [NavBar.name]: NavBar,
    storeNavBar,
    storeShare,
    storeService
  },

  data() {
    return {
      opacityNum: 0,
      default_head: require('./imgs/default_headImg.png'),
      orderTabs: [
        {
          name: "待付款",
          link: "/order",
          icon: 'daifukuan',
          prams: 1
        },
        {
          name: "待发货",
          link: "/order",
          icon: 'daifahuo',
          prams: 2
        },
        {
          name: "待收货",
          link: "/order",
          icon: 'daishouhuo',
          prams: 3
        },
        {
          name: "待评价",
          link: "/order",
          icon: 'daipingjia',
          prams: 4
        },
        {
          name: "售后",
          link: "/aftersale",
          icon: 'shouhou',
        }
      ],
      serviceTabs: [
        {
          name: "收货地址",
          link: "/address",
          icon: require('./imgs/service-1.png')
        },
        {
          name: "我的收藏",
          link: "/like",
          icon: require('./imgs/service-2.png')
        },
        {
          name: "设置",
          link: "/setting",
          icon: require('./imgs/service-3.png')
        },
        {
          name: "客服",
          link: "",
          icon: require('./imgs/service-4.png')
        },
        {
          name: "积分",
          link: "/rewardPoints",
          icon: require('./imgs/service-5.png')
        }
      ],
      share: {
        show: false,
        msg: { // 此处文案和图片需要后面配置
          title: '邀请注册',
          content: '邀请注册内容',
          thumbs: ['https://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/images/20180615/5ad83a4fN6ff67ecd.jpg!cc_350x449.jpg'],
          href: process.env.VUE_APP_HOST+'login/register?from=share'
        }
      },
      orderView:[],
      showService: false, // 客服开关 
    };
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll, true)
    this.getUserInfo();
    this.getOrderView();
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll, true)
  },
  computed:{
    ...mapState('user',{
      isLogin: state => state.isLogin,
      userInfo: state => state.userInfo,
      amsAccount: state => state.userInfo.amsAccount || {},
      umsMember: state => state.userInfo.umsMember || {},
      integration: state => state.userInfo.integration || {}
    }),
    ...mapGetters('user',['bindPhoneStr']),
    ...mapGetters("sys", ['shareEnable','vipEnable'])
  },
  methods: {
    ...mapActions('user',['getUserInfo']),
    handleScroll() {
      const scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop
      this.opacityNum = scrollTop / 66 > 1 ? 1 : scrollTop / 66
    },
    /********* 订单中心板块,跳转 **********/
    jumpLink(path, params) {
      if(path == '/rewardPoints'){
        // 进入积分页面清空查询数据
        this.$store.commit('rewardPoints/RESET_QUERYPARAMS')
      }
      this.$router.push({
        path,
        query: {
          tabId: params
        }
      });
    },
    /********* 跳转到全部订单 **********/
    toOrderCenter() {
      this.$router.push({
        name: 'order',
        query: {
          tabId: 0
        }
      })
    },
    copyAgentNo(){
      let clipboard = new Clipboard(".copyAgentNo");
      clipboard.on("success", e => {
        Toast.success("复制成功");
        // 释放内存
        clipboard.destroy();
      });
      clipboard.on("error", e => {
        // 不支持复制
        Toast.fail("该浏览器不支持自动复制");
        // 释放内存
        clipboard.destroy();
      });
    },
    bannerClick(){
      if(this.vipEnable){
        this.share.href = process.env.VUE_APP_HOST + `login/register?from=share&recommenderNo=${this.amsAccount.agentNo}`
        this.share.show = true
      }else{
        this.jumpLink('/main/home')
      }
    },
    // 订单数量
    getOrderView(){
      this.$http
        .post("/order/getOrderCount")
        .then(res => {
          this.orderView = []
          for (const key in res.info) {
            this.orderView.push(res.info[key])
          }
        })
        .catch(error => {
        });
    },
    serviceTabClick(item) {
      if (item.link) {
        this.jumpLink(item.link)
      } else {
        this.openService()
      }
    },
    openService() {
     if (!this.isLogin) {
        this.$router.push('/login')
        this.$store.commit('user/SET_BEFOREPATH', this.$route.path)
        // Toast('用户未登录')
        return
      }
      // ysf('open', {})	
      // return
      service.init(this.userInfo, null, null, () => {
        this.showService = true
      });
    }

  }
};
</script>

<style lang="scss" scoped>
.user-page {
  background: #FFF;
  overflow: hidden;
  padding-bottom: 70px;
  .top-bar{
    .icon{
      width: 22px;
      height: 22px;
      margin-left: 20px;
    }
  }
  .nav-out.van-hairline--bottom::after {
    border-bottom-width: 0;
  }
  .nav-in{
    /deep/.van-nav-bar__title{
      position: relative;
      left: 40px;
      bottom: 6px;
    }
  }
  .page-content{
    padding: 66px 15px 0;
  }
  .info-bar{
    .row-1{
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 9px;
      .col-left{
        .name{
          font-size: 20px;
          color: #333;
          vertical-align: bottom;
          >img{
            width: 11px;
            height: 9px;
            font-weight: bold;
            margin-left: 8px;
          }
        }
        .invite-code{
          display: flex;
          align-items: center;
          font-size: 15px;
          color: #666;
          margin-top: 8px;
          .line{
            height: 15px;
            width: 1px;
            margin: 0 8px;
            background: #666;
          }
        }
      }
      .col-right{
        width: 61px;
        height: 61px;
        border-radius: 50%;
        overflow: hidden;
        img{
          width: 100%;
          height: 100%;
        }
      }
    }
    .row-2{
      margin: 32px 0 16px;
      display: flex;
      .item{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-right: 53px;
        .val{
          font-size: 22px;
          line-height: 22px;
          color: #333;
          font-weight: bold;
        }
        .label{
          margin-top: 5px;
          font-size: 14px;
          color: #666;
        }
      }
    }
  }
  .nav-bar{
    position: relative;
    img{
      width: 100%;
    }
    .words{
      color: #eee;
      position: absolute;
      top: 30px;
      left: 20px;
      .row-1{
        font-size: 16px;
      }
      .row-2{
        font-size: 12px;
        span{
          font-size: 18px;
          padding: 0 4px;
        }
        &.mgt{
          margin-top: 5px;
        }
      }
    }

  }
  .top-title{
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    span{
      font-size: 18px;
      color: #333333;
      line-height: 18px;
      font-weight: bold;
    }
    img{
      width: 17px;
      height: 12px;
    }
  }
  .order-bar{
    ul{
      display: flex;
      box-shadow: 0px 0px 4px 3px #eee;
      border-radius: 6px;
      li{
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px 0;
        flex: 1;
        position: relative;
        .icon{
          width: 26px;
          height: 26px;
        }
        .name{
          font-size: 12px;
          color: #262626;
          letter-spacing: 0;
          line-height: 12px;
          margin-top: 6px;
        }
        .num{
          position: absolute;
          display: block;
          width: 16px;
          height: 16px;
          font-size: 12px;
          text-align: center;
          top: 16px;
          right: 15px;
          color: #FFF;
          border-radius: 100%;
          background: red;
        }
      }
    }
  }
  .service-bar{
    ul{
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      overflow: hidden;
      li{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 33%;
        height: 89px;
        position: relative;
        &::after{
          position: absolute;
          box-sizing: border-box;
          content: ' ';
          pointer-events: none;
          top: -50%;
          right: -50%;
          bottom: -50%;
          left: -50%;
          border: 0 solid #ebedf0;
          -webkit-transform: scale(0.5);
          transform: scale(0.5);
          border-width: 0 1px 1px 0;
        }
        &:nth-child(-n+3)::after{
          border-width: 1px 1px 1px 0;
        }
        &:nth-child(3n)::after{
          border-width: 0 0 1px 0;
        }
        img{
          width: 26px;
          height: 26px;
        }
        span{
          font-size: 12px;
          color: #7F7F7F;
          letter-spacing: 0;
          line-height: 12px;
          margin-top: 9px;
        }
      }
    }
  }
}
</style>

